<template>
  <tr>
    <th style="text-align: center">班组名称</th>
    <td><input class="input-n270" v-model="groupsNameOne"></td>
    <th style="text-align: center">班组名称</th>
    <td><input class="input-n270" v-model="groupsNameTwo"></td>
  </tr>
</template>

<script>
  export default {
    name: 'addGroup',
    data () {
      return {
        num: 0,
        groupsNameOne: '',
        groupsIdOne: '',
        groupsNameTwo: '',
        groupsIdTwo: ''
      }
    },
    props: {
      length: '',
      group: ''
    },
    watch: {
      groupsNameOne (value, oldValue) {
        this.$emit('del', oldValue)
        this.$emit('set', {'name': value, 'gId': this.groupsIdOne})
      },
      groupsNameTwo (value, oldValue) {
        this.$emit('del', oldValue)
        this.$emit('set', {'name': value, 'gId': this.groupsIdTwo})
      },
      group () {
        this.editGroups()
      }
    },
    mounted () {
      this.num = this.length
      if (this.group) {
        this.editGroups()
      }
    },
    methods: {
      editGroups () {
        this.groupsNameOne = this.group[0].name
        this.groupsIdOne = this.group[0].gId
        if (this.group[1]) {
          this.groupsNameTwo = this.group[1].name
          this.groupsIdTwo = this.group[1].gId
        }
      }
    }
  }
</script>
